<template>
  <div class="aboutus">
    <div class="title">
      <el-divider content-position="center">教师详情</el-divider>
      <p><el-tag>{{this.details.name}}</el-tag><el-tag>档案</el-tag></p>
    </div>
    <el-card class="box-card" style="margin-bottom: 20px;">
      <div class="text item">
        <el-row :gutter="110">
          <el-col :span="8">
            <div class="grid-content bg-purple">
          <img :src="this.details.img"  style="width: 100px; height: 80px" />
         <br></br>
         姓名： <span class="large" >{{this.details.name}}</span></br>
         性别： <span class="large">{{this.details.sex}}</span></br>
         籍贯： <span class="large">{{this.details.nativePlace}}</span></br>
         出生日期： <span class="large">{{this.details.birthday}}</span></br>
         参加工作时间： <span class="large">{{this.details.workTime}}</span></br>
         现从事专业： <span class="large">{{this.details.profession}}</span></br>
    

              <!-- 于2005.07月毕业于<span class="large">某喵喵喵大学</span>，本科学历。在校专业为xxxxxxx，主修课程为xxxx、xxxx、xx和xxxx等课程。在校期间主要技能为java和php语言,和实验室小伙伴一起完成过内部管理平台(成员在线时长记录、周计划制定和组长评价)、纳新面试系统等。 -->
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
                </br>
               <div  v-for="item in this.details.teacherTitleEntities" :key="item.id">
                 </br>
               职称： <span class="large" >{{item.title}}</span></br>
               取得职称资格时间： <span class="large" >{{item.qualificationTime}}</span></br>
               </div> 
               <div  v-for="item in this.details.eductionEntities" :key="item.id">
                 </br>
               学历： <span class="large" >{{item.eduction}}</span></br>
               毕业学校： <span class="large" >{{item.graductionSchool}}</span></br>
               毕业时间： <span class="large" >{{item.graductionTime}}</span></br>
               </div>
               <div  v-for="item in this.details.courseEntityList" :key="item.id">
                 </br>
               所教课程：<span class="large" >{{item.courseName}}</span></br>
               班级：<span class="large" >{{item.classr}}</span></br>
               开课时间<span class="large" >{{item.courseBeginTime}}</span></br>
               </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
                </br>
               <div v-for="item in  this.details.projectEntities" :key="item.id">
                 </br>
               项目名称： <span class="large" >{{item.projectName}}</span></br>
               项目类别：<span class="large" >{{item.category}}</span></br>
               开始时间：<span class="large" >{{item.beginTime}}</span></br>
               结束时间：<span class="large" >{{item.endTime}}</span></br>
               获取情况：<span class="large" >{{item.projectAward}}</span></br>
               </div>    
                <div v-for="item in  this.details.paperEntities" :key="item.id">    
                  </br>      
               论文名称：<span class="large" >{{item.paperName}}</span></br>
               期刊名称：<span class="large" >{{item.periodicalName}}</span></br>
               发表时间：<span class="large" >{{item.publishTime}}</span></br>
               索引情况<span class="large" >{{item.indexes}}</span></br>         
               </div>
                  </div>
          </el-col>
        </el-row>
      </div>
      <div class='topMask square'></div><div class='topMask circular'></div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'AboutUs',
   data(){
       return{
           list:[{
               id:1,
               name:"id",
           },{
               id:2,
               name:"dd"
           }],
           details:{},
         dataForm: {
          id: 0,
          name: '',
          img: '',
          sex: '',
          nativePlace: '',
          birthday: '',
          workTime: '',
          profession: '',
          courseEntityList:[],
          eductionEntities:[],
          paperEntities:[],
          teacherTitleEntities:[],
          projectEntities:[]
        }
       }

   },
   activated(){
   let id=this.$route.query.Id
   console.log(id)
   this.getInfo(id)
   },
   created(){
   
   },
   methods:{
        getInfo(id) {
         if (id) {
            this.$http({
              url: this.$http.adornUrl(`/teacherservice/teacherinfo/teacher/info/${id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                  this.details=data.teacherInfo
                console.log("nvdk",this.details)
                this.dataForm.name = data.teacherInfo.name
                this.dataForm.img = data.teacherInfo.img
                this.dataForm.sex = data.teacherInfo.sex
                this.dataForm.nativePlace = data.teacherInfo.nativePlace
                this.dataForm.birthday = data.teacherInfo.birthday
                this.dataForm.workTime = data.teacherInfo.workTime
                this.dataForm.profession = data.teacherInfo.profession
              }
            })
          }
      }
   }
}
</script>
<style>
  .aboutus .grid-content.line{
    border-right: 1px solid #ddd;
    height: 150px;
  }
  .aboutus .el-card__header{
    background: #545c64;
  }
  .aboutus .el-card__body{
    padding: 50px 20px;
  }
  .aboutus .el-timeline-item__wrapper{
    top: -8px;
  }
  .aboutus .title p .el-tag{
    margin: 0px 5px;
    cursor: pointer;
  }
</style>
<style scoped>
  .aboutus{
    font-size: 14px;
    text-align: left;
    padding: 0px 100px;
  }
  .intro{
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .text {
    font-size: 14px;
    text-align: left;
    line-height: 30px;
    text-indent: 2em;
  }
  .box-card{
    position: relative;
  }
  .item {
    display: inline-block;
    margin: 30px 50px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix span{
    color: #fff;
    font-weight: bold;
  }
  .title p{
    color: #8c8888;
    font-size: 15px;
    margin-bottom: 80px;
    text-align: center;
  }
  .grid-content .large{
    font-size: 16px;
    color: #409EFF;
    font-weight: bold;
  }
  .topMask{
    width: 100px;
    height: 100px;
    background-color: rgba(68,138,255,0.2);
    transform: rotate(45deg);
    position: absolute;
  }
  .square{
    border-radius: 5px;
    top: 0px;
  }
  .circular{
    border-radius: 50%;
    top:80px;
    left: 80%;
    background-color: rgba(255, 208, 75,0.2);
  }
</style>